<template>
	<view class="containerbox bgc-white">
		<view class="x-uv-navbar">
			<uv-navbar leftText="选择词汇" auto-back placeholder />
		</view>
		
		<view class="containerbox">
			<view style="width: 750rpx;" class="px-30 py-20 x-search">
				<uv-input shape="circle" :customStyle="{ backgroundColor: '#efefef' }" suffixIconStyle="font-size: 48rpx" suffixIcon="search" placeholder="请输入内容" clearable v-model="seacher" @change="inputDebounce" />
			</view>
			
			<uv-index-list v-if="!loading && list.length" inactive-color="#909399" :index-list="list.map(item => item.letter)" active-color="#1abc9c" :custom-nav-height="customNavHeight">
				<template v-for="item, index in list" :key="index">
					<uv-index-item>
						<uv-index-anchor :text="item.letter" bgColor="#fff" />
						
						<view class="grid">
							<view class="badge" @tap="onSelect(cell)" v-for="cell, cellIndex in item.list" :key="index" :class="{ actived: isSelect(cell.id) }">{{ cell.word }}</view>
						</view>
					</uv-index-item>
				</template>
			</uv-index-list>
			
			<dw_loading :status="loading" class="my-auto" v-if="loading" :src="`${imgPath}loading.gif`" />
			<dw_default :src="`${imageBaseUrl2}/svg/empty.svg`" v-if="!loading && !list.length" class="my-auto" />
		</view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="flex-1 h-full">
				<view class="flex items-center text-30 w-fit h-full" @click="openPopup">
					<view class="spell spell-danciben text-36 mr-10" />
					<text class="mx-5 text-32 bold">{{ activeWord.length }}</text>单词
					<uni-icons type="up" class="ml-10" color="#ccc" />
				</view>
			</view>
			
			<view class="btn bgc-primary2" @click="wenzhang">AI 文章</view>
		</view>
	</view>
	
	<uni-popup ref="popupRef" type="bottom" :safe-area="false">
		<view class="bgc-white round-md flex flex-column">
			<view class="relative pb-30 flex-1">
				<view class="flex items-center justify-between pt-30 pb-40 px-30">
					<view class="text-36 font-weight-700">已选单词</view>
					<uv-icon name="close" size="32rpx" @tap="popupRef.close()" />
				</view>
				
				
				<view class="flex flex-wrap px-40" style="gap: 30rpx;">
					<view class="badge" style="padding-right: 15rpx;" v-for="cell, index in activeWord" :key="index" @tap="onSelect(cell)">{{ cell.word }} <uni-icons type="closeempty" /></view>
				</view>
			</view>
			
			<view class="h-24" />
			<view class="flex items-center justify-between bottombox">
				<view class="flex-1 h-full">
					<view class="flex items-center text-30 bottombox h-full w-fit" @click="popupRef.close()" style="border: none;padding-left: 0">
						<view class="spell spell-danciben text-36 mr-10" />
						<text class="mx-5 text-32 bold">{{ activeWord.length }}</text>单词
						<uni-icons type="down" class="ml-10" color="#ccc" />
					</view>
				</view>
				<view class="btn bgc-primary2" @click="wenzhang">AI 文章</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	
	import tools from '@/utils';
  import {imageBaseUrl2, imgPath} from '@/common/config'
	import { computed, nextTick, onMounted, ref, getCurrentInstance } from 'vue';
	import { allByletter, getExerDetail_api, postExerJoin_api } from '@/common/apis/course';
	
	
	/** 组件实例 */
	const { proxy } = getCurrentInstance();
	
	/** custom-nav-height */
	const customNavHeight = ref(0);
	
	/** 挂在完成时 */
	onMounted(() => {
		nextTick(() => {
			setTimeout(async () => {
				const xUvNavbar = await uni.getRect('.x-uv-navbar', proxy);
				customNavHeight.value = `${xUvNavbar.height * 2}rpx`;
				
			}, 20)
		});
	});
	
	/** props */
	const props = defineProps(['id']);
	
	/** 生词本列表 */
	const list = ref([]);
	
	/** 所搜 word */
	const seacher = ref('');
	
	/** 请求状态 */
	const loading = ref(true);
	
	/** 获取生词本列表方法 */
	const getlist = async () => {
		const result = await allByletter({ courseId: props.id, word: seacher.value });
		list.value = result;
		loading.value = false;
	};
	
	/** 获取生词本列表 */
	getlist();
	
	/** 搜索触发时 */
	const inputChange = async () => {
		await getlist();
	};
	
	/** 搜索防抖 */
	const inputDebounce = tools.debounce(inputChange, 300, false);
	
	/** 选择的单词 */
	const activeWord = ref([]);
	
	/** 是否选择 */
	const isSelect = computed(() => id => activeWord.value.find(item => item.id === id));
	
	/** 点击单词时 */
	const onSelect = _item => {
		if (isSelect.value(_item.id)) activeWord.value = activeWord.value.filter(item => item.id !== _item.id);
		else {
			if (activeWord.value.length >= 10) {
				uni.$fui.toast('最多选择 10 个单词哦~');
				popupRef.value.open();
				return;
			};
			
			activeWord.value.push(_item);
		};
		
		if (!activeWord.value.length) popupRef.value.close();
	};
	
	/** 生成文章 */
	async function wenzhang() {
		if (!activeWord.value.length) {
			uni.$fui.toast('请先选择单词~');
			return;
		};
		
		const { id } = await postExerJoin_api({ courseId: props.id });
		const nextPageRequestQuery = { thesaurusId: props.id, words: activeWord.value.map(item => item.word), exerciseId: id };
		uni.setStorageSync('aireading-word-next-page-request-query', nextPageRequestQuery);
		uni.navigateTo({ url: '/pages/course/aireading/article' });
	};
	
	/** uv-popup 实例 */
	const popupRef = ref({});
	
	/** 打开 uv-popup 弹窗 */
	const openPopup = () => {
		if (!activeWord.value.length) {
			uni.$fui.toast('请先选择单词~');
			return;
		};
		
		popupRef.value.open('bottom');
	};
	
	
</script>

<style lang="scss" scoped>
.w-fit{width: fit-content}
.h-24{height: 24rpx}
.grid{display: flex; flex-wrap: wrap; gap: 30rpx; padding: 40rpx 30rpx;}
.badge{padding: 0 30rpx; border: 1px solid #e6e6e6; border-radius: 50rpx; line-height: 60rpx; font-size: 32rpx; position: relative;}
.badge.actived{background: #1abc9c; border-color: #1abc9c; color: #fff;}
.badge .close{position: absolute; right: 0; top: 0;}
.bottombox{padding: 20rpx 32rpx 24rpx; border-top: 1px solid #e6e6e6;}
.btn{height: 90rpx; border-radius: 30rpx; flex: 1; text-align: center; line-height: 80rpx; color: #fff; font-size: 32rpx; display: flex; align-items: center; justify-content: center;}
.btn+.btn{margin-left: 20rpx;}	
.parent {
    display: grid;
    grid-template-columns: 1fr;  /* 一列，填满父元素 */
    grid-template-rows: 1fr;     /* 一行，填满父元素 */
    width: 100%;                 /* 根据需要设置父元素的宽度 */
    height: 100%;                /* 根据需要设置父元素的高度 */
}

::v-deep .uv-index-list{
	display: flex;
	flex-direction: column;
	flex: 1 !important;
	width: 100%;
	height: 100%;
	min-height: 0;
}
::v-deep .uv-index-list scroll-view{
	height: 100%;
}
::v-deep .uv-index-anchor{
	font-weight: 700;
}
</style>